<template>
	<view class="" >
		<view class="nav-back">
			<top-heigth :backTitle="backTitle"></top-heigth>
		</view>		
		
			
		<uv-picker ref="pickerStart" :columns="dateLists" @confirm="dateListsConfirmStart"></uv-picker>
		<uv-picker ref="pickerEnd" :columns="dateLists" @confirm="dateListsConfirmEnd"></uv-picker>
		
		
		<view class="content-box">
			<view class="public-box m-t24 back-fff">
				
				<view class="time-work border-b" @click="openPickerStart">
					<view>工作时间</view>
					<view>{{time1}}--{{time2}}</view>
				</view>
				
				<view class="time-box">
					<view @click="chooseItem"  :class="all==1? 'time-list choose':'time-list'">
						<view v-if="all==0">全选</view>
						<view v-else>全不选</view>
					</view>
					<view @click="monday = !monday" :class="monday==1? 'time-list choose':'time-list'">周一</view>
					<view @click="tuesday = !tuesday" :class="tuesday==1? 'time-list choose':'time-list'">周二</view>
					<view @click="wednesday = !wednesday" :class="wednesday==1? 'time-list choose':'time-list'">周三</view>
					<view @click="thursday = !thursday" :class="thursday==1? 'time-list choose':'time-list'">周四</view>
					<view @click="friday = !friday" :class="friday==1? 'time-list choose':'time-list'">周五</view>
					<view @click="staturday = !staturday" :class="staturday==1? 'time-list choose':'time-list'">周六</view>
					<view @click="sunday = !sunday" :class="sunday==1? 'time-list choose':'time-list'">周日</view>
				</view>
				<view @click="saveDetail()" class="login-but">确认提交</view>
			</view>
		</view>
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	
	export default {
		data() {
			return {
				backTitle:"接单时段",
				num:2,
				userInfo: uni.getStorageSync('userInfo'),
				detail: null,
				value: Number(new Date()),
				value2: Number(new Date()),
				
				time1:"00:00",
				time2:"00:00",
				
				all:0,
				monday: 0,
				tuesday: 0,
				wednesday: 0,
				thursday: 0,
				friday: 0,
				staturday: 0,
				sunday: 0,
				
				dateLists: [
					['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
					['00', '30']
				],
			}
		},
		components: { TopHeigth },
		onLoad() {
			this.getJsDetail()
			
		},
		methods: {
			chooseItem(){
				this.all = !this.all
				if(this.all){
					this.monday = 1
					this.tuesday = 1
					this.wednesday = 1
					this.thursday = 1
					this.friday = 1
					this.staturday = 1
					this.sunday = 1
				}else{
					this.monday = 0
					this.tuesday = 0
					this.wednesday = 0
					this.thursday = 0
					this.friday = 0
					this.staturday = 0
					this.sunday = 0
				}
			},
			openPickerStart() {
				this.$refs.pickerStart.open();
			},
			dateListsConfirmStart(e) {
				console.log('dateListsConfirmStart', e.value);
				this.time1 = e.value[0] + ':' +  e.value[1]
				this.openPickerEnd()
			},
			openPickerEnd() {
				this.$refs.pickerEnd.open();
			},
			dateListsConfirmEnd(e) {
				console.log('dateListsConfirmEnd', e.value);
				this.time2 = e.value[0] + ':' +  e.value[1]
			},
			getJsDetail(){ // 技师详情
				uni.$u.http.post('/api/shop/v1_0/tAppStaffRCA/turnTAppStaffInfo',{
					id: this.userInfo.id,
				}).then((res) => {
					this.detail = res.data
					this.monday = this.detail.tAppStaffTimeConfigVo.monday
					this.tuesday = this.detail.tAppStaffTimeConfigVo.tuesday
					this.wednesday = this.detail.tAppStaffTimeConfigVo.wednesday
					this.thursday = this.detail.tAppStaffTimeConfigVo.thursday
					this.friday = this.detail.tAppStaffTimeConfigVo.friday
					this.staturday = this.detail.tAppStaffTimeConfigVo.staturday
					this.sunday = this.detail.tAppStaffTimeConfigVo.sunday
					if(this.detail.tAppStaffTimeConfigVo.startTime && this.detail.tAppStaffTimeConfigVo.endTime){
						this.time1 = this.detail.tAppStaffTimeConfigVo.startTime
						this.time2 = this.detail.tAppStaffTimeConfigVo.endTime
					}
				})
			},
			dateListsConfirm(){
				
			},
			saveDetail(){
				uni.$u.http.post('/api/shop/v1_0/tAppStaffTimeConfigRCA/updateTAppStaffTimeConfig',{
					id:this.detail.tAppStaffTimeConfigVo.id,
					version:this.detail.tAppStaffTimeConfigVo.version,
					monday:this.monday ? 1 : 0,
					tuesday:this.tuesday ? 1 : 0,
					wednesday:this.wednesday ? 1 : 0,
					thursday:this.thursday ? 1 : 0,
					friday:this.friday ? 1 : 0,
					staturday:this.staturday ? 1 : 0,
					sunday:this.sunday ? 1 : 0,
					startTime:this.time1,
					endTime:this.time2,
				}).then((res) => {
					//this.detail = res.data
					uni.showToast({
						icon: "none",
						title: res.message
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			},
			titleChange(n){
				this.num = n
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
	}
	
	.time-top{
		@include flex;
		align-content: space-between;
		width: 100%;
		.title-font{
			width: 33%;
			font-size:28rpx;
			color: #333;
			text-align: center;
			padding-bottom: 16rpx;
		}
		.choose{
			font-weight: bold;
			background: url("/static/image/title-line.png") no-repeat bottom center;
		}
	}
	
	.time-box{
		@include flex;
		flex-flow: row wrap;
		padding: 20rpx 0rpx;
		.time-list{
			width:149rpx;
			height:108rpx;
			background:#F8F8F8;
			font-size:28rpx;
			color: #333;
			text-align: center;
			line-height: 112rpx;
			border-radius: 8rpx;
			margin-right: 10rpx;
			margin-bottom: 16rpx;
			border:2rpx solid #F8F8F8;
			&:nth-child(4n+4){
				margin-right: 0;
			}
		}
		.xiu{
			color: #999;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.xiu-box{
				
			}
		}
		.choose{
			color: #27A0FF;
			border:2rpx solid #27A0FF;
			background: rgba(39,160,255,0.15);
		}
	}
	.back-fff{
		background: #fff;
	}
	.time-work{
		@include flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 0 32rpx 0;
	}
</style>
